import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
import moment from 'moment';
import TabTitle from '@/components/TabTitle/TabTitle';
import UnSettled from './components/UnSettled';
import Settled from './components/Settled';

const TabPane = Tabs.TabPane;

@inject('rootStore') @observer
class Finance extends Component {
  @observable tabKey = 1;
  @observable filterParam = {
    title: '',
    press: '',
    startTime: '',
    endTime: ''
  }
  @observable categoryActiveItem = ""
  @observable categoryStatus = true
  @observable canFetch = true

  state = {
    timeValue: [],
  }

  componentDidMount() {
    document.getElementsByClassName('ant-layout-content')[0].scrollTop = 0

    this.toGetList();
    this.toGetCategory();
    this.toGetStatistics();
  }

  toGetList = () => {
    const contributionStore = this.props.rootStore.contributionStore;

    contributionStore.toChangeFinance(this.props.match.params.type);
  }

  toGetCategory = () => {
    const contributionStore = this.props.rootStore.contributionStore;
    if (!contributionStore.categoryFiftyLoadSuccess) {
      contributionStore.toGetNewsCategoryFifty('en');
    }
  }

  toGetStatistics = () => {
    const contributionStore = this.props.rootStore.contributionStore;
    contributionStore.toGetStatistics();
  }

  toChooseCategory = (name, id) => {
    const contributionStore = this.props.rootStore.contributionStore;
    this.categoryActiveItem = name;
    contributionStore.toChangeCategoryFilter(name, id)
  }

  toChangeCategoryStatus = () => {
    this.categoryStatus = !this.categoryStatus
  }

  tabsOnChange = (key) => {
    const contributionStore = this.props.rootStore.contributionStore;
    const { history } = this.props;

    this.filterParam.title = '';
    this.filterParam.press = '';
    this.filterParam.startTime = '';
    this.filterParam.endTime = '';
    this.categoryActiveItem = ""

    this.setState({
      timeValue: []
    })

    history.push(`/contribution/finance/${key}`)
    setTimeout(() => {
      contributionStore.toChangeFinance(key);
    }, 600)
  }

  filterBarSearch = () => {
    const contributionStore = this.props.rootStore.contributionStore;
    contributionStore.filterParamSearch(this.filterParam);
  }

  titleValueOnChange = (e) => {
    this.filterParam.title = e.target.value;
  }

  timeOnChange = (value) => {
    this.filterParam.startTime = moment(value[0]).format('YYYY-MM-DD HH:mm');
    this.filterParam.endTime = moment(value[1]).format('YYYY-MM-DD HH:mm');
  }

  timeChange = (value, dateString) => {
    this.setState({
      timeValue: value
    })
  }

  filterBarReset = () => {
    const contributionStore = this.props.rootStore.contributionStore;
    this.filterParam.title = '';
    this.filterParam.press = '';
    this.filterParam.startTime = '';
    this.filterParam.endTime = '';
    this.categoryActiveItem = ""

    this.setState({
      timeValue: []
    })

    contributionStore.filterParamSearch(this.filterParam);
  }

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render() {
    const contributionStore = this.props.rootStore.contributionStore;
    const breadCrumb = ['Contribution', 'Finance List']

    return (
      <div className="news-list">
        <TabTitle
          showTabbar={true}
          title="Finance"
          breadCrumb={breadCrumb} />
        <Tabs
          tabBarStyle={{paddingLeft: '28px'}}
          activeKey={this.props.match.params.type}
          onChange={this.tabsOnChange}>
          <TabPane tab="UnSettled" key="0">
            <UnSettled
              {...this.props}
              filterBarSearch={this.filterBarSearch}
              titleValueOnChange={this.titleValueOnChange}
              titleValue={this.filterParam.title}
              timeOnChange={this.timeOnChange}
              timeChange={this.timeChange}
              timeValue={this.state.timeValue}
              filterBarReset={this.filterBarReset}
              categoryListFifty={contributionStore.categoryListFifty}
              toChooseCategory={(name, id) => this.toChooseCategory(name, id)}
              activeItem={this.categoryActiveItem}
              categoryStatus={this.categoryStatus}
              toChangeCategoryStatus={this.toChangeCategoryStatus} />
          </TabPane>
          <TabPane tab="Settled" key="1">
            <Settled
              {...this.props}
              filterBarSearch={this.filterBarSearch}
              titleValueOnChange={this.titleValueOnChange}
              titleValue={this.filterParam.title}
              timeOnChange={this.timeOnChange}
              timeChange={this.timeChange}
              timeValue={this.state.timeValue}
              filterBarReset={this.filterBarReset}
              totalUsers={contributionStore.financeStatistics.createUserCount}
              totalArticles={contributionStore.financeStatistics.articleCount}
              totalSettlement={contributionStore.financeStatistics.settledAmount} />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default Finance;
